import React from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools, Icon,  Popover, } from 'weaver-mobile';
import { WrPicker,WrShow } from '../../../public'
import {TitleContainer} from '../coms'
import {  getWeekOfYear } from '../../../util'
const getLabel = Tools.getLabel;
const PopoverItem = Popover.Item
/*
  我的报告首页头部
*/
@inject('planViewStore')
@withRouter
@observer
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.store = this.props.planViewStore;
  }

  componentWillMount() { }

  getDropItems = () => {
    return [
      (<PopoverItem key={"feedback"} value="scan" data-seed="logId"><span className="workrelate-popover">{getLabel(33956,'意见反馈')}</span></PopoverItem>),
      (<PopoverItem key={"share"} value="scan" data-seed="logId"><span className="workrelate-popover">{getLabel(509020,'报告共享')}</span></PopoverItem>),
      (<PopoverItem key={"log"} value="scan" data-seed="logId"><span className="workrelate-popover">{getLabel(32061,'操作日志')}</span></PopoverItem>),
    ]
  }
  getHeaderDropItems = () => {
    return [
      (<PopoverItem key={"person"} value="scan" data-seed="logId"><span className="workrelate-popover">{getLabel(513693, "查看下属")}</span></PopoverItem>),
      (<PopoverItem key={"org"} value="scan" data-seed="logId"><span className="workrelate-popover">{getLabel(513687,"查看组织")}</span></PopoverItem>),
    ]
  }

  onPopoverSelect = (node, index) => {
    const { key } = node
    if (key == 'feedback') {
      this.props.history.push("/planHome/planView/feedback")
    } else if (key == 'share') {
      this.props.history.push("/planHome/planView/share")
    } else if (key == 'log') {
      this.props.history.push("/planHome/planView/log")
    }
  }
  onHeaderPopoverSelect = (node, index) => {
    const { key } = node
    if (key == 'person') {
      this.props.history.push({pathname:"/planHome/planView/org",search:"sub"})
    } else if (key == 'org') {
      this.props.history.push({pathname:"/planHome/planView/org",search:"org"})
    }
  }
  getTypeDropItems = () => {
    const {tabDatas} = this.store
    let items = []
    if(tabDatas && tabDatas.length>0){
      tabDatas.map(t=>{
        items.push(<PopoverItem key={t.key} value="scan" data-seed="logId"><span className='workrelate-popover'>{t.title}</span></PopoverItem>)
      })
    }
    return items
  }
  onTypePopoverSelect = (node, index) => {
    const { key } = node
    key == '1' ? this.store.type1 = 1 : this.store.type1 = 2
    if (key == '2') {
      this.store.type1=2
      this.store.type2 = getWeekOfYear()
      if( this.store.type2==1 && this.store.year==(new Date().getFullYear()-1)){
        this.store.type2=52
      }
      this.store.getWeek({ year: this.store.year, currentValue: this.store.type2 })
    } else {
      this.store.type1=1
      this.store.year=''
      this.store.type2 = ''
    }
    this.store.getPlanView()
    this.toHome()
  }
  toHome = () => {
    this.props.history.push("/planHome/planView/index")
  }

  onDateChange = (e) => {
    this.store.year = e[0]
    this.store.type2 = e[1]
    this.store.planid=''
    this.store.urlPlanId =''
    if (this.store.type1 == 2) {
      const res = this.store.getWeek({ year: e[0], currentValue: e[1] })
      this.props.history.push("/planHome/planView/index")  
      this.store.getPlanView()
    }else{
      this.store.getPlanView()
      this.props.history.push("/planHome/planView/index")
    }
  }
  //获取状态
  getStatus = (val) => {
    val = val ? val : '-1'
    const color = {
      '0': '#EB9B53',//草稿
      '1': '#5388EB',//审核
      '2': '#B916E8',//退回
      '3': '#49D732',//已完成
      '6': '#5F0E03 ',//过期
      '-1': '#5388EB ',//其他
    }
    const { statusValue } = this.store;
    return <span className="workrelate-status" style={{ backgroundColor: color[val] }}>{statusValue[val]}</span>
  }
  //获取标题
  getTitle=()=>{
    let {resourcename,planname} = this.store
    if(!planname){
      planname = resourcename + getLabel(509008,' 的工作计划报告')
    }
    const pathname = this.props.location.pathname
    let subTitle  = ''
    if(pathname.indexOf("log")>-1){
      subTitle= "> "+ getLabel(32061,'操作日志')
    }else if(pathname.indexOf("feedback")>-1){
      subTitle= "> "+getLabel(33956,'意见反馈')
    }else if(pathname.indexOf("share")>-1){
      subTitle= "> "+getLabel(509020,'报告共享')
    }
    let subCom = <span className="workrelate-mobile-header-title-left-sub-title"> {subTitle}</span>
 //   let title = resourcename ? <span> <span onClick={this.toHome}>{`${resourcename}的工作计划报告`}</span> {subCom}  </span>: ''
    let isIndex =this.props.location.pathname.indexOf("/index")>-1
    let title = <span> <span style={{color:isIndex?'black':'#4D7AD8'}} onClick={this.toHome}>{`${planname}`}</span> {subCom}  </span>
    return title
  }

  render() {
    const preClas = 'workrelate-mobile-plan-planview-header';
    let { resourcename, enddate, planstatus, year, type1, type2, weekText ,totalWeek,auditList,tabDatas} = this.store
    const {showTitle} = this.props
    if(type1==1 && Number(type2)>12){
      type2 = new Date().getMonth()
    }
    let dateVal = [parseInt(year), parseInt(type2)]
    let showRight = planstatus && tabDatas && tabDatas.length>0
    let showDateSelect = tabDatas && tabDatas.length>0 
    
    return (
      <div className={`${preClas}-container ${this.props.location.pathname.indexOf("/org") > -1 ? "no-border-bottom" : ''}`} 
      >
        <div className={`${preClas}-condition-container`}>
          <div >
            <WrShow show={showDateSelect}>
            <Popover mask
              overlayClassName={`${preClas}-popover`}
              placement='bottomLeft'
           //   overlayStyle={{ color: 'currentColor' ,width:'100px',textAlign:'center'}}
              visible={this.state.popoverVisible}
              overlay={this.getTypeDropItems()}
              align={{
                // overflow: { adjustY: 0, adjustX: 0 },
                // offset: [-10, 0],
              }}
              onVisibleChange={() => { this.setState({ popoverVisible: false }) }}
              onSelect={(node, index) => this.onTypePopoverSelect(node, index)}
            >
              <div
                className={`${preClas}-condition-operation-icon`}
              >
                <span >{this.store.type1 == '1' ? getLabel(20617,'月报') : getLabel(20619,'周报')}</span><Icon type="down" size="" />
              </div>
            </Popover>
            </WrShow>
          </div>
          <div>
            <WrShow show={showDateSelect}>
              {type1==2  && <WrPicker
                title=""
                initval={dateVal}
                type={5}
                onChange={this.onDateChange}
                totalWeek={totalWeek}
                weekText={weekText}
                minyear={new Date().getFullYear()-5}
                maxyear={new Date().getFullYear()+1}
              />}
              {type1==1 && <WrPicker
                title=""
                initval={dateVal}
                type={1}
                onChange={this.onDateChange}
                minyear={new Date().getFullYear()-5}
                maxyear={new Date().getFullYear()+1}
              />}
            
            </WrShow>
          </div>
          <div>
            <Popover mask
              overlayClassName={`${preClas}-popover`}
              // overlayStyle={{ color: 'currentColor' ,width:'100px',textAlign:'center'}}
              visible={this.state.popoverVisible}
              overlay={this.getHeaderDropItems()}
              // align={{
              //   overflow: { adjustY: 0, adjustX: 0 },
              //   offset: [-10, 0],
              // }}
              onVisibleChange={() => { this.setState({ popoverVisible: false }) }}
              onSelect={(node, index) => this.onHeaderPopoverSelect(node, index)}
            >
              <div
                className={`${preClas}card-header-operation-icon`}
              >
                <Icon type="ellipsis" size="" />
              </div>
            </Popover>
          </div>
        </div>
        <div style={{display:(showTitle?'block':'none')}}>
          <WrShow show={!this.store.isLoading}>
          <TitleContainer
            title={this.getTitle()}
            enddate={enddate}
            showRight={showRight}
            // planstatus={this.getStatus(planstatus)}
            auditList={
              this.store.auditList
            }
            popover={
              <Popover 
                  mask
                  visible={this.state.popoverVisible}
                  overlay={this.getDropItems()}
                  onVisibleChange={() => { this.setState({ popoverVisible: false }) }}
                  onSelect={(node, index) => this.onPopoverSelect(node, index)}
                > 
                <div style={{display:'flex'}}>
                  {this.getStatus(planstatus)}
                    <Icon type="right"  style={{display:'inline-flex'}}/>
                </div>
                  
                </Popover>
            }
          />
          </WrShow>
        </div>
      
      </div>
    );
  }
}

export default Header;
